<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个 JQuery 程序</title>
    <!-- 第一：下载JQ -->

    <!-- 第二：在页面中，导入 JQ 文件 -->
    <script src="js/jquery-3.7.1.js"></script>


    <!-- 第三：使用 JQ -->
    
</head>
<body>
    <ul>
        <li class="workday">星期一</li>
        <li class="workday">星期二</li>
        <li class="workday">星期三</li>
        <li class="workday">星期四</li>
        <li class="workday">星期五</li>
        <li id="sat">星期六</li>
        <li id="sun">星期天</li>
    </ul>

    <button id="btn1">获取包装集的数量</button>
    <button id="btn2">工作日</button>
    <button id="btn3">奇数星期</button>

    <script>
        $("#btn1").click(function(){
            var len = $("li").length ;
            console.log("li的数量为：" + len);
        }) ;

        $("#btn2").click(function(){
            // $(".workday").css("color","red") ;
            // $("li").slice(0,5).css("color","green") ;

            // $("li").filter(".workday").css("color","blue") ;

            // $("li").filter(function(index){
            //     // return index <=4 ;
            //     return $(this).attr("class") == "workday" ;
            // }).css("color","yellow") ;

            $("li").not($("#sat")).not($("#sun")).css("color","red") ;
        }) ;


        $("#btn3").click(function(){
            $("li").filter(function(index){
                return index % 2 != 0 ;
            }).css("color","blue") ;


            $("li").filter(function(index){
                return index % 2 == 0 ;
            }).css("color","red") ;


            // $("li:even").css("color","red") ;
            // $("li:odd").css("color","blue") ;
        }) ;
    </script>
    

</body>
</html>